<template>
  <div class="app-container" v-loading.fullscreen.lock="loading">
    <div class="filter-container">
      <el-select @change="provinceChange" v-model="reqData.provinceId" placeholder="请选择省">
        <el-option key="-1" label="全部" value="-1"></el-option>
        <el-option v-for="item in provinceList" :key="item.regionId" :label="item.regionName" :value="item.regionId"></el-option>
      </el-select>
      <el-select v-model="reqData.cityId" placeholder="请选择市">
        <el-option key="-1" label="全部" value="-1"></el-option>
        <el-option v-for="item in cityList" :key="item.regionId" :label="item.regionName" :value="item.regionId"></el-option>
      </el-select>
      <el-button type="primary" icon="el-icon-search" @click.native.prevent="handleSearch">
        搜索
      </el-button>
      <el-button style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click.native.prevent="handleImport">
        导入
      </el-button>
      <el-button style="margin-left: 10px;" type="danger" icon="el-icon-delete" @click.native.prevent="handleDelete">
        删除
      </el-button>
    </div>
    <el-table border stripe highlight-current-row style="width: 100%;" :data="listData" @selection-change="handleSelectionChange"
      :empty-text="emptyText">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="高中名称" prop="highSchoolName"></el-table-column>
      <el-table-column label="所属省市">
        <template slot-scope="scope">
          {{scope.row.provinceName}}{{scope.row.cityName}}{{scope.row.districtName}}
        </template>
      </el-table-column>
      <el-table-column label="性质" prop="highSchoolNatureShow"></el-table-column>
      <el-table-column label="类型" prop="highSchoolTypeShow"></el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click.native.prevent="handleEdit(scope.row.highSchoolId)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pager">
      <el-pagination background :pager-count="pagerCount" :page-size="reqData.perPage" :current-page="reqData.curPage"
        layout="prev, pager, next" @current-change="pageChange" :total="total">
      </el-pagination>
    </div>
    <el-dialog title="导入高中数据" :visible.sync="dialogFormVisible">
      <el-form :model="importFormData" label-width="120px" label-position="left">
        <el-form-item label="excel文件">
          <el-upload :limit="1" :on-success="uploadSuccess" :action="uploadUrl" :data="uploadData">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
          <a href="HighSchoolExample.xlsx" target="_blank">点击下载示例excel</a>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native.prevent="dialogFormVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click.native.prevent="doImport">
          确定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { getList, del, importExcel } from '@/api/high_school'
  import { errorMsg, successMsg } from '@/utils/my'
  import { getChildren } from '@/api/region'

  export default {
    inject: ['reload'],
    data() {
      return {
        reqData: {
          provinceId: '',
          cityId: '',
          curPage: 1,
          perPage: 20
        },
        pagerCount: 13,
        total: 0,
        listData: [],
        loading: true,
        delRows: [],
        delIds: '',
        emptyText: '暂无任何数据',
        dialogFormVisible: false,
        importFormData: {
          excelUrl: ''
        },
        uploadData: {
          fileType: 'excel'
        },
        provinceList: [],
        cityList: [],
        uploadUrl: process.env.VUE_APP_BASE_API + '/upload/backend',
        regionReqData: {
          parentId: 0,
          level: 1
        }
      }
    },

    created() {
      this.fetchData()
      this.fetchRegionData()
    },

    methods: {
      handleCreate() {
        //this.$router.push({path: '/admin/admission-data/create'})
      },

      handleEdit(id) {
        this.$router.push({
          path: '/admin/high-school/edit/' + id
        })
      },

      pageChange(p) {
        this.reqData.curPage = p
        this.fetchData()
      },

      fetchData() {
        const that = this
        that.loading = true
        let tmpData = JSON.parse(JSON.stringify(that.reqData))
        tmpData.provinceId = tmpData.provinceId.length <= 0 ? 0 : parseInt(tmpData.provinceId)
        tmpData.cityId = tmpData.cityId.length <= 0 ? 0 : parseInt(tmpData.cityId)
        getList(tmpData).then(res => {
          that.loading = false
          that.total = res.data.total
          that.listData = res.data.list
        })
      },

      handleSearch() {
        this.reqData.curPage = 1
        this.fetchData()
      },

      handleSelectionChange(rows) {
        this.delRows = rows
        let idArr = []
        for (let i = 0; i < rows.length; i++) {
          idArr.push(rows[i].highSchoolId)
        }
        this.delIds = idArr.join(',')
      },

      handleDelete() {
        const that = this
        if (that.delIds.length <= 0) {
          return errorMsg('请至少选择一项')
        }
        that.loading = true
        del({
          ids: that.delIds
        }).then(res => {
          that.loading = false
          if (res.code != 20000) {
            return errorMsg(res.message)
          }
          successMsg(res.message)
          that.reload()
        })
      },

      handleImport() {
        this.dialogFormVisible = true
      },

      uploadSuccess(res) {
        if (res.code != 20000) {
          return errorMsg(res.message)
        }
        this.importFormData.excelUrl = res.data.url
        successMsg(res.message)
      },

      doImport() {
        const that = this
        let d = that.importFormData
        if (d.excelUrl.length <= 0) {
          return errorMsg('请上传excel文件')
        }
        that.dialogFormVisible = false
        that.loading = true
        importExcel(d).then(res => {
          that.loading = false
          if (res.code != 20000) {
            return errorMsg(res.message)
          }
          successMsg(res.message)
          that.reload()
        })
      },

      fetchRegionData () {
        const that = this
        getChildren(that.regionReqData).then(res => {
          if (res.code != 20000) {
            return errorMsg(res.message)
          }
          if (that.regionReqData.level == 1) {
            that.provinceList = res.data
          } else if (that.regionReqData.level == 2) {
            that.cityList = res.data
          }
        })
      },

      provinceChange(id) {
        this.cityList = []
        this.reqData.cityId = '-1'
        this.regionReqData.parentId = parseInt(id)
        this.regionReqData.level = 2
        this.fetchRegionData()
      }

    }
  }
</script>

<style>
  .filter-container {
    margin-bottom: 10px;
  }

  .pager {
    width: 100%;
    text-align: center;
    margin-top: 20px;
  }
</style>
